﻿@page "/kanban/showhide-columns"
@inherits SampleBaseComponent;

@using ej2_blazor_kanban_data_models
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Kanban

<SampleDescription>
    <p>This sample demonstrates how to control the visibility of Kanban columns dynamically. Check or uncheck the checkboxes from the property panel to show or hide the corresponding column.</p>
</SampleDescription>
<ActionDescription>
    <p>The Kanban provides an option to show or hide its column dynamically using the <code>Visible</code> property.</p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <SfKanban KeyField="Status" DataSource="@cardData">
        <KanbanColumns>
            @foreach (ColumnModel item in columnData)
            {
                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField" Visible="@item.Visible"></KanbanColumn>
            }
        </KanbanColumns>
        <KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings>
    </SfKanban>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Show/Hide Columns</div>
    <div class="property-panel-content">
        <table class="property-panel-table" title="Show/Hide Columns">
            <tbody>
                @foreach (ColumnModel item in columnData)
                {
                    <tr>
                        <td style="width: 100%">
                            <SfCheckBox TChecked="bool" @bind-Checked="@item.Visible" Label="@item.HeaderText" ValueChange="@((args) => item.Visible = args.Checked)"></SfCheckBox>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<style>
    .property-panel-section table {
        width: 100%;
    }

        .property-panel-section table tr {
            height: 50px;
        }

        .property-panel-section table td {
            padding-left: 10px;
            width: 50%;
        }
</style>

@code{
    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();
    private List<ColumnModel> columnData = new List<ColumnModel>() {
        new ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "Open" }, Visible = true },
        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress" }, Visible = true },
        new ColumnModel(){ HeaderText= "Testing", KeyField= new List<string>() { "Testing" }, Visible = true },
        new ColumnModel(){ HeaderText= "Done", KeyField=new List<string>() { "Close" }, Visible = true }
    };
}
